<template>
  <div class="bigbox">
    <div class="header">
      <span @click="goshangceng()"
        ><svg-icon iconClass="back" class="zhuo_back"></svg-icon
      ></span>
      <div>商品详情</div>
    </div>
    <div class="tope">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
      <div class="jnm">
        <div class="jnmone">
          <div class="jnma">秒杀专场</div>
          <div class="jnmb"><b>￥234.50</b><span>￥354.00</span></div>
          <div class="jnmc">销量326</div>
        </div>
        <div class="gnm">
          <div class="triangle-right"></div>
          <div class="gnma">
            <div>距离开始还有</div>
            <div class="gnmb">
              <van-count-down :time="time" format="HH : mm : ss " />
            </div>
          </div>
        </div>
      </div>
      <div class="ujn">
        <h3>{{ ccitem.www }}</h3>
        <div>{{ ccitem.title }}</div>
      </div>
      <div class="cvb">
        <div>评价</div>
        <div>商品</div>
        <div>售后</div>
      </div>
      <div class="vbn">
        <div class="asd" v-for="(item, index) in shuju" :key="index">
          <dl>
            <dt>
              <img :src="item.touxiang" alt="" />
              <h4>{{ item.user }}</h4>
            </dt>
            <dd>
              <img :src="item.img" alt="" />
              <div>{{ item.say }}</div>
            </dd>
          </dl>
        </div>
      </div>
      <div class="iconn">
        <i
          ><van-icon
            name="shopping-cart-o"
            color="#ff6600"
            size="40"
            :badge="shu"
            @click="gogowucheq()"
        /></i>
      </div>
    </div>
    <div class="foter">
      <div @click="goshopcar(ccitem)" class="addgowuche">加入购物车</div>
      <div @click="shopcar(ccitem.num)" class="tiaozgouwuc">立即购买</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";
export default {
  name: "Info",
  data() {
    return {
      ccitem: {},
      time: 30 * 60 * 60 * 1000,
      shuju: [],
      shu: 0,
    };
  },

  computed: {
    ...mapState(["list"]),
  },
  created() {
    this.shu = this.list.length;
    this.ccitem = this.$route.params.cccitem;
    axios("/getpingjia").then((res) => {
      this.shuju = res.list;
      console.log(this.shuju);
    });
  },
  methods: {
    goshopcar(ccitem) {
      let flag = this.list.some((item) => {
        return item.id === ccitem.id;
      });
      if (flag) {
        ccitem.num += 1;
      } else {
        this.list.push(ccitem);
        this.shu = this.list.length;
      }
      console.log(this.list);
    },
    shopcar(num) {
      this.$router.push({ name: "Zhifu", query: { allpri: num } });
    },
    gogowucheq() {
      this.$router.push({ path: "/layout/car" });
    },
    goshangceng() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.bigbox {
  font-size: 18px;
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
}

.header {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-around;
  padding: 0 10px;
  line-height: 60px;

  div {
    margin: 0 auto;
    padding-right: 40px;
  }
}
.tope {
  flex: 1;
  .iconn {
    position: fixed;
    right: 30px;
    bottom: 70px;
    width: 60px;
    height: 60px;
    background-color: burlywood;
    text-align: center;
    border-radius: 50%;
    i {
      line-height: 60px;
    }
  }
}

.jnm {
  width: 100%;
  height: 60px;
  background-image: linear-gradient(to right, #6937cd, #5c28b9);
  padding: 10px;
  display: flex;
  .jnmone {
    width: 71%;
    height: 100%;
    background-color: #6937cd;
    display: flex;
    color: #fff;
    span {
      text-decoration: line-through;
    }
    .jnma {
      font-size: 15px;
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 20px;
      border-radius: 10px;
      background-color: #5c28b9;
    }
    .jnmb {
      margin-top: 10px;
      margin-left: 10px;
    }
    .jnmc {
      font-size: 12px;
      margin-top: 10px;
      margin-left: 10px;
    }
  }
  .gnm {
    width: 29%;
    display: flex;
    .triangle-right {
      width: 0;
      height: 0;
      border-top: 20px solid transparent;
      border-right: 20px solid #fff;
      border-bottom: 20px solid transparent;
    }
    .gnma {
      flex: 1;
      background-color: #fff;
      font-size: 10px;
    }
  }
}
.ujn {
  width: 100%;
  height: 100px;
  border-bottom: 1px solid #ccc;
  padding: 0 10px;
  h3 {
    margin-top: 10px;
  }
  div {
    margin-top: 10px;
  }
}
.vbn {
  margin-top: 20px;
}
.asd {
  padding: 10px;
  dt {
    display: flex;
    h4 {
      padding-top: 10px;
      margin-left: 10px;
    }
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 250px;
  text-align: center;
  background-color: #39a9ed;
}
.cvb {
  background-color: burlywood;
  width: 100%;
  height: 40px;
  display: flex;
  padding: 0 10px;
  line-height: 40px;
  justify-content: space-around;
  position: -webkit-sticky;
  position: sticky;
  text-align: center;
  color: #fff;
  margin-bottom: 50px;
  top: 0;
  z-index: 1;
}
.foter {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: space-around;
  text-align: center;
  line-height: 45px;
  position: sticky;
  left: 0;
  bottom: 0;
  div {
    width: 50%;
    background-color: aqua;
    height: 100%;
  }
  .addgowuche {
    background-color: #ff9900;
  }
  .tiaozgouwuc {
    background-color: #ff6600;
  }
}
</style>
